<!-- 距离面板 -->
<template>
	<view class="container">
		<view class="body">
			<radio-group class="radio-group" @change="radioChange">
				<label class="label" v-for="(item, index) in items" :key="item.value">
					<text class="text">{{item.name}}</text>
					<radio class="radio" :value="item.value" :checked="item.checked" color="#FE3333" />
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const items = ref([{
			value: '0',
			name: '不限',
			checked: true
		},
		{
			value: '1',
			name: '由近到远',
			checked: false
		},
		{
			value: '2',
			name: '由远到近',
			checked: false
		}
	]);
	
	const radioChange = (e) => {
		const value = e.detail.value;
	
		items.value.forEach(item => {
			item.checked = item.value === value;
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 192rpx;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-color: white;
		border-radius: 0 0 20rpx 20rpx;

		.body {
			.radio-group {
				padding: 20rpx;
				
				.label {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 30rpx;
					
					.text {
						font-size: 28rpx;
						color: #222;
					}
					
					.radio {
						transform: scale(0.85);
					}
				}
			}
		}
	}
</style>